<template>
  <view class="step">
    <view class="step_box">
      <!-- 左侧进度线 -->
      <view class="step_left"> </view>

      <!-- 进度名称 -->
      <view class="step_right">
        <view
          class="right-content"
          v-for="(item, index) in stepData"
          :key="index"
        >
          <view class="right-content-item">
            <view v-if="item.rightStatus == 0">
              <p class="title" :style="{ color: '#999' }">
                {{ item.rightName }}
              </p>
            </view>
            <view v-if="item.rightStatus != 0">
              <p class="title" :style="{ color: '#FF7045' }">
                {{ item.rightName }}
              </p>
            </view>
            <p class="result" v-if="item.rightId == 4">
              <view class="text">最近完成的人</view>
              <view class="img-list">
                <image
                  v-for="img in defaultImgList"
                  :src="img"
                  :key="img"
                  class="avatar"
                ></image>
              </view>
            </p>
          </view>
          <!-- 完成后是个文字 -->
          <view
            class="finish-text"
            v-if="item.rightStatus == 2 || item.rightStatus == 3"
            @click.stop="handleClickItem(item)"
          >
            <text>{{ getTextName(item) }}</text>
            <image class="go" :src="orangeGo"></image>
          </view>
          <!-- 将要去完成是个按钮 -->
          <view
            class="begin-btn"
            v-if="item.rightStatus == 1"
            @click.stop="handleClickItem(item)"
          >
            <text class="text">{{ getBtnName(item) }}</text>
            <image class="white-arrow" :src="whiteArrow"></image>
          </view>
          <!-- 左侧的进度点 -->
          <p
            class="status"
            :style="{
              background: item.rightStatus == 1 ? colors : '#ccc'
            }"
          >
            {{ item.rightStatus == 1 ? '' : '' }}
          </p>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Steps',
  data() {
    return {};
  },
  props: {
    colors: {
      type: String
    },
    stepData: {
      type: Array
    },
    imgList: {
      type: Array
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    imgList: {
      handler(val) {
        if (val.length) {
          this.defaultImgList = val;
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      orangeGo: this.$imgBase + 'careerPath/orangeGo.png',
      whiteArrow: this.$imgBase + 'careerPath/whiteArrow.png',
      defaultImgList: [
        this.$imgBase + 'careerPath/realPicOne.png',
        this.$imgBase + 'careerPath/realPicTwo.png',
        this.$imgBase + 'careerPath/realPicThree.png'
      ]
    };
  },
  methods: {
    getTextName(item) {
      const { rightId, rightStatus } = item;
      if (rightStatus == 2) {
        return '完成';
      } else if (rightStatus == 3) {
        return '过期';
      } else if (rightStatus == 0) {
        return '敬请期待';
      } else {
        return '前往';
      }
    },
    getBtnName(item) {
      const rightId = item.rightId;
      switch (+rightId) {
        // case 1:
        //   return "已完成";
        // case 2:
        //   return "已完成";
        case 3:
          return '立即完善';
        case 4:
          return '前往诊断';
        default:
          return '立即完成';
      }
    },
    handleClickItem(item) {
      // // 没有登录，跳去登录
      // if (!this.personId) {
      //   this.showLoginDialog();
      //   return;
      // }
      // // 没有激活，跳去激活
      // if (!this.info.personName) {
      //   uni.showToast({ icon: "none", title: "请先激活！" });
      //   return;
      // }
      console.log('item', item);
      // 完善简历
      if (item.rightId == 3) {
        // 有没有使用过都是跳到完善建立页面
        uni.navigateTo({
          url: '/pagesSub/newResume/index'
        });
      }
      //简历诊断
      if (item.rightId == 4) {
        //未使用
        if (item.rightStatus == 1) {
          uni.navigateTo({
            url: '/pagesSub/AIResumeDiagnoseNew/index'
          });
          //已使用
        } else if (item.rightStatus == 2) {
          uni.navigateTo({
            url: '/pagesSub/AIResumeDiagnoseNew/index'
          });
        }
      }
    },
    jumpNext(item) {
      this.$emit('itemClick', item);
    }
  }
};
</script>

<style lang="scss" scoped>
.step {
  padding: 30rpx 0;
}

.step_box {
  display: flex;
  margin-left: 9rpx;

  .step_left {
    width: 2rpx;
    display: block;
    background-color: #dddddd;
    overflow: hidden;
  }

  .step_right {
    width: 100%;
    margin-left: 24rpx;
    margin-top: -10rpx;
    .right-content {
      position: relative;
      margin-bottom: 30rpx;
      border-bottom: 1px solid #f7e0d9;
      padding-bottom: 22rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-item {
        &-name {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
      .title {
        font-weight: 500;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        color: #e7a586;
      }
      .finish-text {
        color: #e7a586;
        font-size: 26rpx;
        display: flex;
        align-items: center;
        .go {
          width: 20rpx;
          height: 20rpx;
        }
      }
      .begin-btn {
        // width: 166rpx;
        background: #ff711e;
        border-radius: 32rpx;
        display: flex;
        padding: 12rpx 24rpx;
        align-items: center;
        justify-content: space-between;
        .text {
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #ffffff;
        }
        .white-arrow {
          width: 20rpx;
          height: 20rpx;
          margin-left: 4rpx;
          padding-top: 6rpx;
        }
      }
      .times {
        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
        line-height: 36rpx;
      }

      .status {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        position: absolute;
        top: 10rpx;
        background-color: #ccc;
        left: -29rpx;
        color: white;
        line-height: 12px;
        font-size: 10px;
        text-align: center;
      }

      .result {
        padding: 20rpx 0 0 0;
        font-size: 22rpx;
        display: flex;
        .text {
          font-size: 26rpx;
          color: #e7a586;
        }
        .img-list {
          display: flex;
          align-items: center;
          margin-left: 10rpx;
          .avatar {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            &:not(:first-child) {
              margin-left: -12rpx;
            }
          }
        }
      }

      &:last-of-type {
        margin-bottom: 0;

        .rightStatus {
          top: 14rpx;
        }

        &::before {
          content: '';
          width: 6rpx;
          height: 100%;
          background-color: #ffffff;
          position: absolute;
          top: 22rpx;
          left: -24rpx;
        }
      }
    }
  }
}
</style>
